<template>
  <div class="jingpin-radio-container">
    <Header />
    <!-- 电台内容区域 -->
    <div class="radio-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="spinner"></div>
        <p>正在加载电台节目...</p>
      </div>
      
      <!-- 无内容状态 -->
      <div v-if="!loading && programs.length === 0" class="empty-state">
        <i class="iconfont icon-radio-empty"></i>
        <p>暂无电台节目，敬请期待</p>
      </div>
      
      <!-- 节目列表（实际内容将从部长端推送的数据获取） -->
      <div v-if="!loading && programs.length > 0" class="program-grid">
        <div v-for="program in programs" :key="program.id" class="program-card">
          <div class="program-cover">
            <img :src="program.coverUrl" :alt="program.title" class="cover-img">
            <div class="play-btn" @click="playProgram(program)">
              <i class="iconfont icon-play-circle"></i>
            </div>
          </div>
          <div class="program-info">
            <h3 class="program-title">{{ program.title }}</h3>
            <p class="program-desc">{{ program.description }}</p>
            <div class="program-meta">
              <span class="publish-time">{{ formatDate(program.publishTime) }}</span>
              <span class="duration">{{ program.duration }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部播放器（固定在底部） -->
    <div v-if="currentProgram" class="audio-player">
      <div class="player-info">
        <img :src="currentProgram.coverUrl" :alt="currentProgram.title" class="player-cover">
        <div class="player-details">
          <h4>{{ currentProgram.title }}</h4>
        </div>
      </div>
      <audio 
        ref="audioElement" 
        :src="currentProgram.audioUrl" 
        controls 
        class="audio-control"
      >
        您的浏览器不支持音频播放
      </audio>
    </div>
    
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'

// 状态管理
const programs = ref([])
const loading = ref(true)
const currentProgram = ref(null)
const audioElement = ref(null)

// 获取电台节目数据（从后端API获取，数据由部长端推送）
const fetchRadioPrograms = async () => {
  try {
    loading.value = true
    // 实际项目中替换为真实API地址
    const response = await axios.get('/api/radio/programs')
    programs.value = response.data
  } catch (error) {
    console.error('获取电台节目失败:', error)
  } finally {
    loading.value = false
  }
}

// 播放节目
const playProgram = (program) => {
  currentProgram.value = program
  // 自动播放选中的节目
  if (audioElement.value) {
    audioElement.value.play()
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 页面加载时获取节目数据
onMounted(() => {
  fetchRadioPrograms()
})
</script>

<style scoped> 
.jingpin-radio-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

/* 页面标题样式 */
.page-header h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

/* 内容区域样式 */
.radio-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 80px; /* 底部留出播放器空间 */
}

/* 加载状态样式 */
.loading-state {
  text-align: center;
  padding: 80px 0;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 无内容状态样式 */
.empty-state {
  text-align: center;
  padding: 80px 0;
  color: #666;
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 20px;
  color: #ccc;
}

/* 节目列表样式 */
.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.program-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.program-cover {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.program-card:hover .cover-img {
  transform: scale(1.05);
}

.play-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(52, 152, 219, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.play-btn:hover {
  background-color: #3498db;
  transform: scale(1.1);
}

.play-btn i {
  font-size: 1.2rem;
}

.program-info {
  padding: 20px;
}

.program-title {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program-desc {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 36px;
}

.program-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #999;
}

/* 底部播放器样式 */
.audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 12px 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 100;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 220px;
}

.player-cover {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
}

.player-details h4 {
  margin: 0;
  font-size: 0.9rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.audio-control {
  flex: 1;
  height: 40px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .program-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .audio-player {
    flex-direction: column;
    padding: 10px;
    gap: 10px;
  }
  
  .player-info {
    width: 100%;
    justify-content: center;
  }
}
</style>